<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>

    <style>
      #head{
        width: 100%;
        height: 50px;
        margin-top: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 25px;
        background-color: aquamarine;
      }
      .content{
        width: 100%;
        height: 600px;
        margin-top: 15px;
       /* background-color: aqua; */
        padding-top: 20px;
      }
      .kuang{
        width: 700px;
        height: 30px;
      //  background-color: chartreuse;
        margin-left: 500px;
      }
      .kuang input{
        width: 400px;
        height: 27px;
      }
      .kuang button{
        width: 50px;
        height: 30px;
      }
      .content_table{
        margin-top: 50px;
        margin-left: 500px;
        font-size: 30px;
        text-align: center;
      }

    </style>
  </head>

  <body>
    <div id="head">

    </div>

    <div class="content">
        <div class="kuang">
            <input type="text" placeholder="通过书名查询" id="shuming">
            <button onclick="cx()">查询</button>

            <button class="addbtn" onclick="add()">添加</button>
        </div>
        <div class="content_table">
          <table border="1" id="shuju">

          </table>
        </div>
    </div>


      <script src="axios.min.js"></script>
      <script>

        window.onload=function(){
          var username = localStorage.getItem('username');
          var head = document.getElementById('head');
          head.innerText = "欢迎,"+ username;
          booklInfo();
        }

         function booklInfo(){
          var url = "http://localhost:8080/system/book/select";
           axios.get(url,"",{

           }).then(response => {
             if(response.data.code == 200){
                var arr= [];
                arr = response.data.data;
                var s= "<tr><td>序号</td><td>书名</td><td>作者</td><td>出版社</td><td>价格</td><td>编辑</td><td>编辑</td></tr>";
                for(var i=0;i<arr.length;i++){
                  var temp = "<tr>"+"<td>"+arr[i].id+"</td>"+"<td>"+arr[i].bookName+"</td>"+"<td>"+arr[i].authorName+"</td>"+"<td>"+arr[i].press+"</td>"
                  +"<td>"+arr[i].price+"</td>"+"<td><button onclick='xg("+arr[i].id+")'>修改</button></td>"
                  +"<td><button onclick='sc("+arr[i].id+")'>删除</button></td>"+"</tr>";
                  s+= temp;
                }
                var shuju = document.getElementById('shuju');
                shuju.innerHTML = s;

             }else{
                console.log(response);
                alert(response.data.message)
             }
             })
         };

         function xg(n){
            window.location.href = "xiugai.html?n="+n;
            console.log(n);
            booklInfo();
         }

         function sc(n){

           var url = "http://localhost:8080/system/book/delete/"+n;
            axios.delete(url,"",{

            }).then(response => {
              if(response.data.code == 200){
                  booklInfo();
                  alert(response.data.message)
              }else{
                 console.log(response);
                 alert(response.data.message)
              }
              })

            console.log(n);

         }

        function cx(){
          var shuming = document.getElementById('shuming');
          var sm = shuming.value;
          console.log(sm);

          var url = "http://localhost:8080/system/book/select?key="+sm;
           axios.get(url,"",{}).then(response => {
             if(response.data.code == 200){
                var arr= [];
                arr = response.data.data;
                var s= "<tr><td>序号</td><td>书名</td><td>作者</td><td>出版社</td><td>价格</td><td>编辑</td><td>编辑</td></tr>";
                for(var i=0;i<arr.length;i++){
                  var temp = "<tr>"+"<td>"+arr[i].id+"</td>"+"<td>"+arr[i].bookName+"</td>"+"<td>"+arr[i].authorName+"</td>"+"<td>"+arr[i].press+"</td>"
                  +"<td>"+arr[i].price+"</td>"+"<td><button onclick='xg("+arr[i].id+")'>修改</button></td>"
                  +"<td><button onclick='sc("+arr[i].id+")'>删除</button></td>"+"</tr>";
                  s+= temp;
                }
                var shuju = document.getElementById('shuju');
                shuju.innerHTML = s;
             }else{
                console.log(response);
                alert(response.data.message)
             }
             })


        }

        function add(){
          window.location.href = "add.html";
        }

      </script>
  </body>


</html>
